import React from 'react';
import { List, Space, Typography } from 'antd';
import { FolderOutlined, FileOutlined, BarChartOutlined, TableOutlined } from '@ant-design/icons';
import './index.scss';

const { Text } = Typography;

const CustomTreeNode = ({ data, level = 0 }) => {
  const getIcon = (type) => {
    switch (type) {
      case 'folder':
        return <FolderOutlined style={{ color: '#3963bc' }} />;
      case 'chart':
        return <BarChartOutlined style={{ color: '#f6bd16' }} />;
      case 'table':
        return <TableOutlined style={{ color: '#5b8ff9' }} />;
      default:
        return <FileOutlined style={{ color: '#5b8ff9' }} />;
    }
  };

  return (
    <List
      itemLayout="horizontal"
      dataSource={data}
      renderItem={(item) => (
        <List.Item className={`custom-tree-node level-${level}`}>
          <Space>
            {getIcon(item.type)}
            <Text>{item.title}</Text>
          </Space>
          {item.children && (
            <div className="custom-tree-children">
              <CustomTreeNode data={item.children} level={level + 1} />
            </div>
          )}
        </List.Item>
      )}
    />
  );
};

const CustomTree = ({ data }) => {
  return (
    <div className="custom-tree">
      <CustomTreeNode data={data} />
    </div>
  );
};

export default CustomTree;